<template>
  <div id="exchange">
    <div class="exchange-box">
      <NavBar title="兑换" left-arrow @click-left="onClickLeft" />
      <div class="exchange-head">
        <Field
          class="exchange-left"
          readonly
          clickable
          name="picker"
          v-model="front"
          @click="showPicker = true"
        />
        <Popup v-model="showPicker" position="bottom">
          <Picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirmfront"
            @cancel="showPicker = false"
          />
        </Popup>
        <div class="exchange-centre" @click="trade">
          <img src="../../assets/images/exchange.png" alt="" />
        </div>

        <Field
          class="exchange-right"
          readonly
          clickable
          name="picker"
          v-model="behind"
          @click="showPicker2 = true"
        />
        <Popup v-model="showPicker2" position="bottom">
          <Picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirmbehind"
            @cancel="showPicker2 = false"
          />
        </Popup>
      </div>
      <div class="exchange-quantity">兑换数量</div>
      <div class="exchange-USDT">
        <div class="USDT">USDT</div>
        <div class="quantity">
          <input type="text" placeholder="请输入兑换数量" />
        </div>
        <div class="allexchange">全部兑换</div>
      </div>
      <div class="parities">
        <div class="parities-top">
          <div class="top-one">
            <div>兑换汇率</div>
            <div class="one-left">0.00002189</div>
          </div>
          <div class="top-two">
            <div>可用USDT</div>
            <div class="one-center">1151.94</div>
          </div>
          <div class="top-three">
            <div>可得BTC</div>
            <div class="one-right">0</div>
          </div>
        </div>
        <div class="parities-bottom">
          <div class="bottom-one">
            <div>手续费比例</div>
            <div class="one-left">0</div>
          </div>
          <div class="bottom-two">
            <div>手续费</div>
            <div class="one-right">0</div>
          </div>
        </div>
      </div>
      <div class="btn">兑换</div>
    </div>
  </div>
</template>
<script>
import { NavBar, Popup, Field, Picker } from 'vant'
export default {
  components: {
    NavBar,
    Popup,
    Field,
    Picker
  },
  data() {
    return {
      front: 'USDT', // 选择（前）
      behind: 'BCT', // 选择（后）
      columns: ['USDT', 'BTC', 'ETH', 'CNY', 'AUD'],
      showPicker: false,
      showPicker2: false
    }
  },
  created() {},
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1)
    },

    // 调起选择器(前)
    onConfirmfront(value) {
      console.log(value, 'onConfirmfront+++++')
      this.front = value
      this.showPicker = false
    },

    // 调起选择器(后)
    onConfirmbehind(value) {
      console.log(value, 'onConfirmbehind+++++')
      this.behind = value
      this.showPicker2 = false
    },

    // 点击前后交换
    trade() {
      this.front = [this.behind, (this.behind = this.front)][0]
    }
  }
}
</script>
<style lang="less" scoped>
#exchange {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .exchange-box {
    background-color: #fff;
    padding-bottom: 10px;
    .exchange-head {
      display: flex;
      justify-content: space-between;
      margin: 10px auto;
      .exchange-left {
        width: 40%;
        height: 36px;
        margin-left: 10px;
        border-radius: 10px;
        background-color: #f7f6fb;
        line-height: 18px;
      }
      .exchange-centre {
        width: 30px;
        height: 30px;
        img {
          width: 30px;
          height: 30px;
          margin-top: 3px;
        }
      }
      .exchange-right {
        width: 40%;
        height: 36px;
        margin-right: 10px;
        border-radius: 10px;
        background-color: #f7f6fb;
        line-height: 18px;
      }
    }
    .exchange-quantity {
      font-size: 14px;
      padding-left: 10px;
      margin-top: 15px;
    }
    .exchange-USDT {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      height: 60px;
      width: 355px;
      margin-right: 10px;
      margin-left: 10px;
      border-bottom: 1px solid #f7f6fb;
      .USDT {
        font-size: 25px;
        font-weight: bold;
        height: 40px;
        line-height: 40px;
      }
      .quantity {
        input {
          border: none;
          height: 40px;
          color: inherit;
          font-size: 20px;
          line-height: 40px;
          margin-left: 10px;
          width: 210px;
        }
      }
      .allexchange {
        font-size: 12px;
        color: #007aff;
        height: 40px;
        line-height: 40px;
      }
    }
    .parities {
      width: 315px;
      margin: 10px auto;
      height: 120px;
      text-align: center;
      .parities-top {
        display: flex;
        justify-content: space-between;
        .one-left {
          margin-top: 10px;
        }
        .one-center {
          margin-top: 10px;
        }
        .one-right {
          margin-top: 10px;
        }
      }
      .parities-bottom {
        display: flex;
        justify-content: space-between;
        width: 200px;
        margin: 20px auto;
        .one-left {
          margin-top: 10px;
        }
        .one-right {
          margin-top: 10px;
        }
      }
    }
    .btn {
      width: 345px;
      margin: 15px;
      height: 40px;
      background-color: #588bf7;
      border-radius: 20px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
